'use client';

import React, { useState } from 'react';
import { 
  Card, 
  Form, 
  Input, 
  Select, 
  Switch, 
  Button, 
  message, 
  Tabs,
  Upload,
  Space
} from 'antd';
import { 
  SaveOutlined,
  UploadOutlined
} from '@ant-design/icons';
import AdminLayout from '@/components/AdminLayout';

const { Option } = Select;
const { TabPane } = Tabs;

const SettingsPage: React.FC = () => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);

  const onFinish = async (values: any) => {
    try {
      setLoading(true);
      // 模拟保存设置
      await new Promise(resolve => setTimeout(resolve, 1000));
      message.success('设置保存成功');
    } catch (error) {
      message.error('保存设置失败');
    } finally {
      setLoading(false);
    }
  };

  return (
    <AdminLayout 
      selectedKey="7" 
      breadcrumbItems={[{ title: '系统设置' }]}
    >
      <div style={{ padding: '24px' }}>
        <h1 style={{ marginBottom: '24px', fontSize: '24px', fontWeight: 'bold' }}>
          系统设置
        </h1>

        <Card>
          <Tabs defaultActiveKey="1">
            <TabPane tab="基本设置" key="1">
              <Form
                form={form}
                layout="vertical"
                onFinish={onFinish}
                initialValues={{
                  siteName: '海产品交易平台',
                  siteDescription: '专业的高端海产品交易平台',
                  contactEmail: 'admin@seafood.com',
                  contactPhone: '400-123-4567',
                  maintenanceMode: false,
                }}
              >
                <Form.Item
                  name="siteName"
                  label="网站名称"
                  rules={[{ required: true, message: '请输入网站名称' }]}
                >
                  <Input placeholder="请输入网站名称" />
                </Form.Item>

                <Form.Item
                  name="siteDescription"
                  label="网站描述"
                >
                  <Input.TextArea placeholder="请输入网站描述" rows={4} />
                </Form.Item>

                <Form.Item
                  name="contactEmail"
                  label="联系邮箱"
                  rules={[{ type: 'email', message: '请输入有效的邮箱地址' }]}
                >
                  <Input placeholder="请输入联系邮箱" />
                </Form.Item>

                <Form.Item
                  name="contactPhone"
                  label="联系电话"
                >
                  <Input placeholder="请输入联系电话" />
                </Form.Item>

                <Form.Item
                  name="maintenanceMode"
                  label="维护模式"
                  valuePropName="checked"
                >
                  <Switch />
                </Form.Item>

                <Form.Item>
                  <Space>
                    <Button 
                      type="primary" 
                      htmlType="submit" 
                      loading={loading}
                      icon={<SaveOutlined />}
                    >
                      保存设置
                    </Button>
                    <Button onClick={() => form.resetFields()}>
                      重置
                    </Button>
                  </Space>
                </Form.Item>
              </Form>
            </TabPane>

            <TabPane tab="邮件设置" key="2">
              <Form
                layout="vertical"
                onFinish={onFinish}
                initialValues={{
                  smtpHost: 'smtp.example.com',
                  smtpPort: 587,
                  smtpUsername: 'admin@example.com',
                  smtpEncryption: 'tls',
                }}
              >
                <Form.Item
                  name="smtpHost"
                  label="SMTP服务器"
                  rules={[{ required: true, message: '请输入SMTP服务器地址' }]}
                >
                  <Input placeholder="请输入SMTP服务器地址" />
                </Form.Item>

                <Form.Item
                  name="smtpPort"
                  label="SMTP端口"
                  rules={[{ required: true, message: '请输入SMTP端口' }]}
                >
                  <Input placeholder="请输入SMTP端口" type="number" />
                </Form.Item>

                <Form.Item
                  name="smtpUsername"
                  label="SMTP用户名"
                  rules={[{ required: true, message: '请输入SMTP用户名' }]}
                >
                  <Input placeholder="请输入SMTP用户名" />
                </Form.Item>

                <Form.Item
                  name="smtpPassword"
                  label="SMTP密码"
                >
                  <Input.Password placeholder="请输入SMTP密码" />
                </Form.Item>

                <Form.Item
                  name="smtpEncryption"
                  label="加密方式"
                >
                  <Select>
                    <Option value="tls">TLS</Option>
                    <Option value="ssl">SSL</Option>
                    <Option value="none">无加密</Option>
                  </Select>
                </Form.Item>

                <Form.Item>
                  <Space>
                    <Button 
                      type="primary" 
                      htmlType="submit" 
                      loading={loading}
                      icon={<SaveOutlined />}
                    >
                      保存设置
                    </Button>
                    <Button onClick={() => form.resetFields()}>
                      重置
                    </Button>
                  </Space>
                </Form.Item>
              </Form>
            </TabPane>

            <TabPane tab="上传设置" key="3">
              <Form
                layout="vertical"
                onFinish={onFinish}
                initialValues={{
                  maxFileSize: 10,
                  allowedFileTypes: ['.jpg', '.png', '.gif'],
                }}
              >
                <Form.Item
                  name="maxFileSize"
                  label="最大文件大小(MB)"
                  rules={[{ required: true, message: '请输入最大文件大小' }]}
                >
                  <Input placeholder="请输入最大文件大小" type="number" addonAfter="MB" />
                </Form.Item>

                <Form.Item
                  name="allowedFileTypes"
                  label="允许的文件类型"
                >
                  <Select mode="tags" placeholder="请输入允许的文件类型">
                    <Option value=".jpg">.jpg</Option>
                    <Option value=".png">.png</Option>
                    <Option value=".gif">.gif</Option>
                    <Option value=".pdf">.pdf</Option>
                    <Option value=".doc">.doc</Option>
                    <Option value=".docx">.docx</Option>
                  </Select>
                </Form.Item>

                <Form.Item
                  name="storagePath"
                  label="存储路径"
                >
                  <Input placeholder="请输入文件存储路径" />
                </Form.Item>

                <Form.Item>
                  <Space>
                    <Button 
                      type="primary" 
                      htmlType="submit" 
                      loading={loading}
                      icon={<SaveOutlined />}
                    >
                      保存设置
                    </Button>
                    <Button onClick={() => form.resetFields()}>
                      重置
                    </Button>
                  </Space>
                </Form.Item>
              </Form>
            </TabPane>
          </Tabs>
        </Card>
      </div>
    </AdminLayout>
  );
};

export default SettingsPage;